<template>
    <div class="yqcx-card tenant">
        <div class="yqcx-card-title">
            <van-cell icon="user-circle-o">
                <template #title>
                    <span>承租人</span>
                    <span v-if="total" style="padding-left:12px;font-size:12px;color:#ff976a;">预警总数：{{total}}，展示承租人TOP10</span>
                </template>
            </van-cell>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th class="van-hairline--bottom">承租人信息</th>
                    <th class="van-hairline--bottom" style="width:80px">数量</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in datas" :key="index">
                    <td>{{item.tenantName}}</td>
                    <td>{{item.count}}</td>
                </tr>
                <tr v-if="loading">
                    <td colspan="2">加载中...</td>
                </tr>
                <tr v-else-if="datas.length === 0">
                    <td colspan="2">暂无数据</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Level extends Vue {
    @Prop({type: Array, default(){ return []}}) public datas!:any[];
    @Prop({type: Boolean, default(){ return false}}) public loading!:boolean;
    @Prop({type: Number, default(){ return 0}}) public total!:number;
}
</script>
